<template>
    <el-container class="wrapper">
        <Aside/>
        <el-container class="main-container is-vertical">
            <Header/>
            <el-main>
                <router-tab :max-alive="15"/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Aside from './public/aside';
import Header from './public/header';
import Footer from './public/footer';
import {getNow, watermark} from '~/watermark';

export default {
    name: "Layout",
    components: {
        Aside,
        Header,
        //Main,
        Footer,
    },
    data () {
        return {
            resizeTimeout: null,
            authTimeout: null,
            authTimeoutNotification: null,
        }
    },
    methods: {
        initData() {
            this.getUserInfo();
        },
        getUserInfo() {
            this.$store.dispatch('manager/Info').then(res => {
                this.loginAfter();
            }).catch(error => {
                console.error('getUserInfo', error);
                this.$store.dispatch('manager/Logout').then(() => {
                    this.$router.push({name: 'login'});
                });
            });
        },
        getConfigs() {
            this.$store.dispatch('config/Lists').then(res => {
            });
        },
        loginAfter() {
            // 获取菜单
            this.$store.dispatch('backend/Menu');

            this.checkTimeout();

            this.makeWatermark();
        },
        onResize() {
            this.$store.dispatch('backend/InitConfig');
        },
        checkTimeout() {
            if (admin.left_time <= 0) return ;
            let lastRequestTime = this.$helper.getCache("lastRequestTime", 0),
                second = parseInt(new Date().getTime() / 1000) - lastRequestTime,
                tipSecond = 30;

            console.log('倒计时 ', admin.left_time - second);
            // 超时
            if (second >= admin.left_time) {
                this.$store.dispatch('manager/Logout').then(() => {

                }).finally(() => {
                    window.opener = null;
                    window.open('about:blank', '_top').close();
                });
                this.$message.success('关闭辣');
                return ;
            }
            // 小于待提示时间
            if (second < (admin.left_time - tipSecond)) {
                if (this.authTimeoutNotification) {
                    this.authTimeoutNotification.close();
                    this.authTimeoutNotification = null;
                }
            } else if (second === (admin.left_time - tipSecond)) {
                if (this.authTimeoutNotification) this.authTimeoutNotification.close();
                this.authTimeoutNotification = this.$notify.warning({
                    title: '温馨提示',
                    message: '长时间未操作, 即将退出',
                    showClose: false,
                    duration: tipSecond * 1000,
                });
            }
            this.authTimeout = setTimeout(() => {
                this.checkTimeout();
            }, 1000);
        },
        makeWatermark() {
            const now = getNow()
            const user = this.$store.state.manager.info;
            if(user.username !== 'simon') {
                watermark({ 'watermark_txt': user.username + '：' + user.name + '，' + now })
            }
        }
    },
    mounted() {
        this.initData();

        this.onResize();
        const that = this;
        window.onresize = function temp() {
            that.$store.commit('backend/SET_WINDOW_RESIZE')
            window.clearTimeout(that.resizeTimeout)
            that.resizeTimeout = setTimeout(function() {
                that.onResize()
            }, 400);
        }
    },
}
</script>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    height: 100%;
}
</style>
